Batching Otomatis React: Mengoptimalkan Pembaruan State untuk Performa

Performa React sangat penting untuk menciptakan antarmuka pengguna yang mulus dan responsif. Salah satu fitur utama yang diperkenalkan untuk meningkatkan performa adalah batching otomatis. Teknik optimisasi ini secara otomatis mengelompokkan beberapa pembaruan state ke dalam satu re-render, yang menghasilkan peningkatan performa yang signifikan. Hal ini sangat relevan dalam aplikasi kompleks dengan perubahan state yang sering terjadi.

Apa itu Batching Otomatis React?

Batching, dalam konteks React, adalah proses mengelompokkan beberapa pembaruan state ke dalam satu pembaruan tunggal. Sebelum React 18, batching hanya diterapkan pada pembaruan yang terjadi di dalam event handler React. Pembaruan di luar event handler, seperti yang ada di dalam setTimeout, promise, atau event handler bawaan (native), tidak di-batch. Hal ini dapat menyebabkan re-render yang tidak perlu dan hambatan performa.

React 18 memperkenalkan batching otomatis, yang memperluas optimisasi ini ke semua pembaruan state, di mana pun itu terjadi. Ini berarti bahwa baik pembaruan state Anda terjadi di dalam event handler React, callback setTimeout, atau resolusi promise, React akan secara otomatis mengelompokkannya menjadi satu re-render tunggal.

Mengapa Batching Otomatis Penting?

Batching otomatis memberikan beberapa manfaat utama:

• Peningkatan Performa: Dengan mengurangi jumlah re-render, batching otomatis React meminimalkan jumlah pekerjaan yang perlu dilakukan browser untuk memperbarui DOM, yang menghasilkan antarmuka pengguna yang lebih cepat dan responsif.
• Mengurangi Overhead Rendering: Setiap re-render melibatkan React membandingkan DOM virtual dengan DOM aktual dan menerapkan perubahan yang diperlukan. Batching mengurangi overhead ini dengan melakukan lebih sedikit perbandingan.
• Mencegah State yang Tidak Konsisten: Batching memastikan bahwa komponen hanya melakukan re-render dengan state akhir yang konsisten, mencegah state perantara atau sementara ditampilkan kepada pengguna.

Bagaimana Cara Kerja Batching Otomatis

React mencapai batching otomatis dengan menunda eksekusi pembaruan state hingga akhir konteks eksekusi saat ini. Ini memungkinkan React untuk mengumpulkan semua pembaruan state yang terjadi selama konteks tersebut dan mengelompokkannya menjadi satu pembaruan tunggal.

Perhatikan contoh sederhana berikut:

            function ExampleComponent() {
  const [count1, setCount1] = useState(0);
  const [count2, setCount2] = useState(0);

  function handleClick() {
    setTimeout(() => {
      setCount1(count1 + 1);
      setCount2(count2 + 1);
    }, 0);
  }

  return (
    <div>
      <p>Count 1: {count1}</p>
      <p>Count 2: {count2}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
}

            

              
                Copy
              
            
          

Sebelum React 18, mengklik tombol akan memicu dua re-render: satu untuk setCount1 dan satu lagi untuk setCount2. Dengan batching otomatis di React 18, kedua pembaruan state dikelompokkan bersama, menghasilkan hanya satu re-render.

Contoh Aksi Batching Otomatis

1. Pembaruan Asinkron

Operasi asinkron, seperti mengambil data dari API, sering kali melibatkan pembaruan state setelah operasi selesai. Batching otomatis memastikan bahwa pembaruan state ini dikelompokkan bersama, bahkan jika terjadi di dalam callback asinkron.

            function DataFetchingComponent() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch('https://api.example.com/data');
        const jsonData = await response.json();
        setData(jsonData);
        setLoading(false);
      } catch (error) {
        console.error('Gagal mengambil data:', error);
        setLoading(false);
      }
    }

    fetchData();
  }, []);

  if (loading) {
    return <p>Loading...</p>;
  }

  return <div>Data: {JSON.stringify(data)}</div>;
}

            

              
                Copy
              
            
          

Dalam contoh ini, setData dan setLoading keduanya dipanggil di dalam fungsi asinkron fetchData. React akan mengelompokkan pembaruan ini bersama-sama, menghasilkan satu re-render tunggal setelah data diambil dan state loading diperbarui.

2. Promise

Serupa dengan pembaruan asinkron, promise sering kali melibatkan pembaruan state saat promise berhasil (resolve) atau gagal (reject). Batching otomatis memastikan bahwa pembaruan state ini juga dikelompokkan bersama.

            function PromiseComponent() {
  const [result, setResult] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    const myPromise = new Promise((resolve, reject) => {
      setTimeout(() => {
        const success = Math.random() > 0.5;
        if (success) {
          resolve('Promise berhasil diselesaikan!');
        } else {
          reject('Promise ditolak!');
        }
      }, 1000);
    });

    myPromise
      .then((value) => {
        setResult(value);
        setError(null);
      })
      .catch((err) => {
        setError(err);
        setResult(null);
      });
  }, []);

  if (error) {
    return <p>Error: {error}</p>;
  }

  if (result) {
    return <p>Result: {result}</p>;
  }

  return <p>Loading...</p>;
}

            

              
                Copy
              
            
          

Dalam kasus ini, baik setResult dan setError(null) dipanggil saat berhasil, atau setError dan setResult(null) dipanggil saat gagal. Terlepas dari itu, batching otomatis akan menggabungkan ini menjadi satu re-render tunggal.

3. Event Handler Bawaan (Native)

Terkadang, Anda mungkin perlu menggunakan event handler bawaan (misalnya, addEventListener) alih-alih event handler sintetis React. Batching otomatis juga berfungsi dalam kasus ini.

            function NativeEventHandlerComponent() {
  const [scrollPosition, setScrollPosition] = useState(0);

  useEffect(() => {
    function handleScroll() {
      setScrollPosition(window.scrollY);
    }

    window.addEventListener('scroll', handleScroll);

    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);

  return <p>Scroll Position: {scrollPosition}</p>;
}

            

              
                Copy
              
            
          

Meskipun setScrollPosition dipanggil di dalam event handler bawaan, React akan tetap mengelompokkan pembaruan-pembaruan tersebut, mencegah re-render berlebihan saat pengguna melakukan scroll.

Memilih Keluar dari Batching Otomatis

Dalam kasus yang jarang terjadi, Anda mungkin ingin memilih keluar dari batching otomatis. Misalnya, Anda mungkin ingin memaksakan pembaruan sinkron untuk memastikan UI diperbarui segera. React menyediakan API flushSync untuk tujuan ini.

Catatan: Penggunaan flushSync harus dilakukan dengan hemat, karena dapat berdampak negatif pada performa. Umumnya, lebih baik mengandalkan batching otomatis kapan pun memungkinkan.

            import { flushSync } from 'react-dom';

function ExampleComponent() {
  const [count, setCount] = useState(0);

  function handleClick() {
    flushSync(() => {
      setCount(count + 1);
    });
  }

  return (<button onClick={handleClick}>Increment</button>);
}

            

              
                Copy
              
            
          

Dalam contoh ini, flushSync memaksa React untuk segera memperbarui state dan melakukan re-render komponen, melewati batching otomatis.

Praktik Terbaik untuk Mengoptimalkan Pembaruan State

Meskipun batching otomatis memberikan peningkatan performa yang signifikan, tetap penting untuk mengikuti praktik terbaik dalam mengoptimalkan pembaruan state:

• Gunakan Pembaruan Fungsional: Saat memperbarui state berdasarkan state sebelumnya, gunakan pembaruan fungsional (yaitu, memberikan fungsi ke setter state) untuk menghindari masalah dengan state yang basi (stale state).
• Hindari Pembaruan State yang Tidak Perlu: Hanya perbarui state bila perlu. Hindari memperbarui state dengan nilai yang sama.
• Memoize Komponen: Gunakan React.memo untuk melakukan memoize pada komponen dan mencegah re-render yang tidak perlu.
• Gunakan `useCallback` dan `useMemo`: Memoize fungsi dan nilai yang dilewatkan sebagai props untuk mencegah komponen anak melakukan re-render yang tidak perlu.
• Optimalkan Re-render dengan `shouldComponentUpdate` (Komponen Kelas): Meskipun komponen fungsional dan hook sekarang lebih umum, jika Anda bekerja dengan komponen berbasis kelas yang lebih lama, terapkan shouldComponentUpdate untuk mengontrol kapan komponen melakukan re-render berdasarkan perubahan prop dan state.
• Profil Aplikasi Anda: Gunakan React DevTools untuk membuat profil aplikasi Anda dan mengidentifikasi hambatan performa.
• Pertimbangkan Imutabilitas: Perlakukan state sebagai sesuatu yang tidak dapat diubah (immutable), terutama saat berhadapan dengan objek dan array. Buat salinan data baru alih-alih memutasinya secara langsung. Ini membuat deteksi perubahan lebih efisien.

Batching Otomatis dan Pertimbangan Global

Batching otomatis, sebagai optimisasi performa inti React, menguntungkan aplikasi secara global terlepas dari lokasi pengguna, kecepatan jaringan, atau perangkat. Namun, dampaknya bisa lebih terasa dalam skenario dengan koneksi internet yang lebih lambat atau perangkat yang kurang bertenaga. Untuk audiens internasional, pertimbangkan poin-poin berikut:

• Latensi Jaringan: Di wilayah dengan latensi jaringan tinggi, mengurangi jumlah re-render dapat secara signifikan meningkatkan responsivitas yang dirasakan dari aplikasi. Batching otomatis membantu meminimalkan dampak keterlambatan jaringan.
• Kemampuan Perangkat: Pengguna di berbagai negara mungkin menggunakan perangkat dengan daya pemrosesan yang bervariasi. Batching otomatis membantu memastikan pengalaman yang lebih lancar, terutama pada perangkat kelas bawah dengan sumber daya terbatas.
• Aplikasi Kompleks: Aplikasi dengan UI yang rumit dan pembaruan data yang sering akan mendapat manfaat paling besar dari batching otomatis, terlepas dari lokasi geografis pengguna.
• Aksesibilitas: Peningkatan performa berarti aksesibilitas yang lebih baik. Antarmuka yang lebih lancar dan responsif menguntungkan pengguna dengan disabilitas yang mengandalkan teknologi bantu.

Kesimpulan

Batching otomatis React adalah teknik optimisasi yang kuat yang dapat secara signifikan meningkatkan performa aplikasi React Anda. Dengan secara otomatis mengelompokkan beberapa pembaruan state ke dalam satu re-render, ini mengurangi overhead rendering, mencegah state yang tidak konsisten, dan mengarah pada pengalaman pengguna yang lebih lancar dan responsif. Dengan memahami cara kerja batching otomatis dan mengikuti praktik terbaik untuk mengoptimalkan pembaruan state, Anda dapat membangun aplikasi React berkinerja tinggi yang memberikan pengalaman pengguna yang hebat kepada pengguna di seluruh dunia. Memanfaatkan alat seperti React DevTools membantu untuk lebih menyempurnakan dan mengoptimalkan profil performa aplikasi Anda dalam berbagai pengaturan global.